.top-wrap {
  width: 100%;
  padding: 0 15px;
  @import "../../common/top-filter";
  .top-filter {
    .date-option {
      a {
        padding: 0 20px;
        font-size: 16px;
        color: black;
        &.select {
          color: #00ccff;
        }
      }
    }
  }
  .balance-type-nav {
    width: 100%;
    padding: 20px 15px;
    border-top: 1px solid #ecebeb;
    position: relative;
    a {
      font-size: 18px;
      padding: 0 17px;
      color: #8e8e8e;
      font-weight: normal;
      &.active, &:hover {
        color: #00ccff;
      }
    }
    .balance-sum {
      position: absolute;
      top: 20px;
      right: 15px;
      font-size: 18px;
      .sum-in {
        em {
          font-style: normal;
          font-weight: inherit;
          color: #75ba5e;
        }
        margin-right: 20px;
      }
      .sum-out {
        em {
          font-style: normal;
          font-weight: inherit;
          color: #e85d6c
        }
      }
    }
  }
}

@media screen and (max-width: 1400px) {
  .top-wrap {
    width: 100%;
    padding: 0 10px;
    .top-filter {
      .date-option {
        a {
          padding: 0 13px;
          font-size: 12px;
        }
      }
    }
    .balance-type-nav {
      padding: 13px 10px;
      a {
        font-size: 12px;
        padding: 0 11px;
      }
      .balance-sum {
        position: absolute;
        top: 20px;
        right: 15px;
        font-size: 12px;
        .sum-in {
          margin-right: 13px;
        }
      }
    }
  }
}